Hardly a day goes by where I do not come
across a really cool Flash site that features a background
that loads randomly when loaded. Each time you press
Refresh, the page loads, and, you guessed it, a new
background appears! This seems simple doesn't it? A variable
randomly assigns a number, and that number then plays a
corresponding keyframe in a movie clip with background
images stored in numerous keyframes.
As it is true in anything Flash related, there
is a wrong way and a right way to create a randomly loading
background. The method I outlined above is easy, but the
more efficient method I will explain in this tutorial is far
easier.
[ reload this page to see a
new background image ]
There are several parts to making the above
animation - both of which are relatively simple. The first
part involves converting background images into a SWF movie.
Transferring a JPG to SWF:
Create a new movie in Flash
MX. Save the movie as image0. Adjust the movie's
dimensions to 300 width and 200 height.
Once you saved the movie and adjusted the width and
height, let's get an image in there! Make sure you find an
image that exactly matches the width/height of your movie
(300 x 200).
For your convenience, I have provided an image for you to
use:
[ use the above image ]
Once you found the image, get that image into Flash MX. If
you are using the above image I have provided, right click
on the image and select Copy. Then go to Flash and paste the
image by going to Edit | Paste.
The image will have pasted perfectly in your movie. Go to
File | Save to save this image0 file. Then go to File
| Publish. The SWF file for this will have been created.
Now, here comes the mundane part: you will need to repeat
the above 4 steps four more times for four MORE images. Do
not worry! I do not want you to create 5 more movie files
just for this tutorial. I have created them for you, and you
should download them and place them ALL in the same folder.
Right click on the following links and select Save Target
As to save the animations the same folder:
Make sure the above files are all stored in the same folder:
[ all the animations are
stored in the same folder ]
You may be wondering why you had to first
learn how to convert a jpg into a swf, and then why I
suddenly decided for you to download the SWF instead. The
reason is, I wanted you to know how to make a JPG into a SWF
using Flash MX, and I did not want to hassle you with having
to find five more images and converting to Flash.
note
When naming the SWF
for the background images, make sure you end them
with a number that signifies the order in which they
were created. The first image would end in a zero,
the second image would end in a one, etc. In Flash,
all numerical lists, etc. start with a zero. While
the first image would be a "one", it is actually a
"zero". You will understand more as you progress
through the tutorial.
Loading the Backgrounds Randomly Now that you have the background
images (in the SWF) format downloaded to a folder, we
will randomly load the images when the animation you
create loads:
Create a new animation and SAVE it in the same folder that
the background images are stored in. Set the width and
height of the movie you just created to 300 width by 200
height.
Now, create a blank movie clip and place it on your stage.
The easiest way to create a blank movie clip is, first, draw
a small circle. Select the circle and press F8. From the
Convert to Symbol Dialog box, select Movie Clip:
[ the
convert to symbol dialog box ]
Once you selected Movie Clip, press OK to close the dialog
box. You have converted the circle to a movie clip. Now,
right click on the circle and select Edit in Place. Delete
the circle by highlighting it and pressing the Delete key.
Click the Scene 1 tab to return to your main timeline:
[ the scene
1 tab ]
I think this calls for a
short break. Once you are ready, press the Next Page link
below:
Loading
a Random Background
